<template>
  <div class="invoiceDetail-con">

    <div class="invoiceDetail">
      <split-vertical title="开票详情"></split-vertical>
      <ul>
        <li>开票公司：<span>{{invoiceData.kaipiaoCompany}}</span></li>
        <li>收票公司：<span>{{invoiceData.companyName}}</span></li>
        <li>商品名称：<span>{{invoiceData.productName}}</span></li>
        <li>发票金额：<span>{{invoiceData.invoiceMoney}}</span></li>
      </ul>
      <ul>
        <li>发票号：<span>{{invoiceData.invoiceNo}}</span></li>
        <li>类型：<span>{{invoiceData.invoiceType}}</span></li>
        <li>录入人：<span>{{invoiceData.username}}</span></li>
      </ul>
    </div>
    <div class="billOrderView">
      <split-vertical title="发票展示"></split-vertical>
      <ul class="el-upload-list--picture-card ">
        <li class="el-upload-list__item" v-for="(val,index) in imgUrl" :key="index">
          <div class="qcfd" >
            <img :src="val.resourceUrl"  class="f-fl"  width="148" height="148" id="image">
              <span class="el-upload-list__item-actions">
                  <span @click="enlargeImage(index,val.resourceUrl)">
                    <i class="iconfont">&#xe639;</i>
                  </span>
                  <span @click="deleteImage(val.id)">
                     <i class="iconfont">&#xe696;</i>
                  </span>
              </span>
          </div>
        </li>
      </ul>
    </div>
    <div class="btnB">
      <el-button size="medium" @click="backFirst">返回上一级</el-button>
      <el-button size="medium" @click="backList">返回列表</el-button>
    </div>
    <enlarge-img v-if="show" :imgSrc="imgSrc" @close="close"></enlarge-img>
  </div>
</template>
<script>
  import  enlargeImg from 'components/base/billOrder/enlargeImg'
  import SplitVertical from "components/common/SplitVertical"
  export default{
    components:{
      SplitVertical,enlargeImg
    },
    data(){
      return{
        invoiceData:{},
        id:'',
        imgUrl:[],
        dialogVisible:false,
        show:false,
        imgSrc:''
      }
    },
    created(){
        this.id=this.$route.query.id
        this.invoiceData= this.$route.query.invoiceData
        this.invoiceResource()
    },
    methods:{
      backFirst(){
        this.$router.go(-1)
      },
      backList(){
        this.$router.go(-2)
      },
      invoiceResource(){
        let param={
          serviceId:this.id
        }
        let succ=data=>{
          if(data.code=="OK"){
              this.imgUrl=data.data
          }else{
            this.$message.error(data.msg)
          }
        }
        this.api.invoiceResource(param,succ)
      },
      enlargeImage(i,resourceUrl){
        this.imgSrc=resourceUrl
        this.show=true
      },
      close(){
        this.show=false
      },
      deleteImage(id){
        let parmas={
           id:id
        }
        let succ=data=>{
          if(data.code=="OK"){
              this.$message.success("删除图片成功")
              this.invoiceResource()
          }else{
            this.$message.error(data.msg)
          }
        }
        this.api.invoiceResourceDelete(parmas,succ)
      }
    }
  }
</script>
<style>
  .el-upload-list--picture-card {
    margin: 0;
    display: inline;
  }
  el-upload-list--picture-card .el-upload-list__item {
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 148px;
    height: 148px;
    margin: 0 8px 8px 0;
    display: inline-block;
  }
  .el-upload-list--picture-card .el-upload-list__item-actions {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: default;
    text-align: center;
    color: #fff;
    opacity: 0;
    font-size: 20px;
    background-color: rgba(0,0,0,.5);
    transition: opacity .3s;
  }
</style>
<style lang="scss" scoped>
.invoiceDetail-con{
  .invoiceDetail{
      display: flex;
      background: #fff;
      border-left: 2px solid #e8e8e8;
      border-right: 2px solid #e8e8e8;
      border-bottom: 2px solid #e8e8e8;
    ul{
      flex:1;
      li{
        line-height:35px;
        font-size: 15px;
        margin-left:10px;
        span{
          color:#606266;
        }
        img{
          width:100%;
          height:100%;
        }
      }
    }
  }
  .billOrderView{
    margin-top:2px;
    background: #fff;
    border-left: 2px solid #e8e8e8;
    border-right: 2px solid #e8e8e8;
    border-bottom: 2px solid #e8e8e8;
    padding: 0 10px;
    min-height: 250px;
  }
  .btnB{
    width:100%;
    text-align: center;
    margin-top:20px;
  }

}
</style>
